<template>
  <div class="px-5 h-full bg-white">
    <div class="h-[33%]">
      <div class="font-bold text-3xl py-3">最近播放</div>
      <div class="pb-3 bg-white">
        <ul class="flex gap-10 text-sm cursor-default">
          <li :class="activeIndex == index ? 'active text-red-400' : ''" class="py-2" @click="changIndex(index)"
            v-for="(item, index) in tabList">
            {{ item }}
          </li>
        </ul>
        <div class="flex items-center justify-between py-2">
          <div class="flex gap-3">
            <!-- 播放按钮 -->
            <div class="flex items-center gap-2 bg-gray-200 w-fit rounded-full px-4 py-1 text-sm">
              <svg t="1728552419424" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="7400" width="15" height="15">
                <path
                  d="M893.035 463.821679C839.00765 429.699141 210.584253 28.759328 179.305261 8.854514 139.495634-16.737389 99.686007 17.385148 99.686007 57.194775v909.934329c0 45.496716 42.653172 68.245075 76.775709 48.340262 45.496716-28.435448 676.763657-429.375262 716.573284-454.967165 34.122537-22.748358 34.122537-76.775709 0-96.680522z"
                  fill="#2c2c2c" p-id="7401"></path>
              </svg>
              播放
            </div>
            <!-- 下载按钮 -->
            <div class="flex items-center gap-2 bg-gray-200 w-fit rounded-full px-4 py-1 text-sm">
              <svg t="1728553429468" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="10190" width="18" height="18">
                <path d="M511.7 507.8m-469.5 0a469.5 469.5 0 1 0 939 0 469.5 469.5 0 1 0-939 0Z" fill="#242424"
                  p-id="10191"></path>
                <path
                  d="M722.6 497.8c16 16 16 41.9 0 57.9L540.1 738.2c-16 16-41.9 16-57.9 0s-16-41.9 0-57.9l182.5-182.5c16-16 41.9-16 57.9 0z"
                  fill="#FFFFFF" p-id="10192"></path>
                <path
                  d="M300.7 497.8c16-16 41.9-16 57.9 0l182.5 182.5c16 16 16 41.9 0 57.9s-41.9 16-57.9 0L300.7 555.7c-16-16-16-41.9 0-57.9z"
                  fill="#FFFFFF" p-id="10193"></path>
                <path
                  d="M512.3 255.3c22.6 0 41 18.3 41 41v411.9c0 22.6-18.3 41-41 41-22.6 0-41-18.3-41-41V296.3c0.1-22.7 18.4-41 41-41z"
                  fill="#FFFFFF" p-id="10194"></path>
              </svg>
              下载
            </div>
            <!-- 批量按钮 -->
            <div class="flex items-center gap-2 bg-gray-200 w-fit rounded-full px-4 py-1 text-sm">
              <svg t="1728553554623" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="12217" width="18" height="18">
                <path
                  d="M296.533333 712.832a42.666667 42.666667 0 0 1 0 60.330667l-90.538666 90.538666a42.666667 42.666667 0 0 1-60.330667 0l-30.165333-30.165333a42.666667 42.666667 0 0 1 60.330666-60.373333l60.373334-60.330667a42.666667 42.666667 0 0 1 60.330666 0zM896 768a42.666667 42.666667 0 0 1 0 85.333333H426.666667a42.666667 42.666667 0 0 1 0-85.333333h469.333333zM296.533333 414.165333a42.666667 42.666667 0 0 1 0 60.330667l-90.538666 90.538667a42.666667 42.666667 0 0 1-60.330667 0l-30.165333-30.165334a42.666667 42.666667 0 0 1 60.330666-60.373333l60.373334-60.330667a42.666667 42.666667 0 0 1 60.330666 0zM896 469.333333a42.666667 42.666667 0 0 1 0 85.333334H426.666667a42.666667 42.666667 0 0 1 0-85.333334h469.333333zM296.533333 115.498667a42.666667 42.666667 0 0 1 0 60.330666L205.994667 266.368a42.666667 42.666667 0 0 1-60.330667 0l-30.165333-30.165333A42.666667 42.666667 0 0 1 175.829333 175.786667l60.373334-60.330667a42.666667 42.666667 0 0 1 60.330666 0zM896 170.666667a42.666667 42.666667 0 0 1 0 85.333333H426.666667a42.666667 42.666667 0 1 1 0-85.333333h469.333333z"
                  fill="#000000" p-id="12218"></path>
              </svg>
              批量
            </div>
          </div>
          <div class="flex gap-5 text-xs">
            <div class="flex items-center">
              <el-icon size="15">
                <Search />
              </el-icon>
              搜索
            </div>
            <div class="flex items-center">
              <svg t="1728554670196" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="16548" width="17" height="17">
                <path
                  d="M768 362.666667a21.333333 21.333333 0 0 1 21.333333 21.333333v387.648l61.418667-61.397333a21.333333 21.333333 0 0 1 30.165333 0l30.165334 30.165333a21.333333 21.333333 0 0 1 0 30.165333l-116.053334 116.053334a53.333333 53.333333 0 0 1-90.922666-34.218667L704 848.917333V384a21.333333 21.333333 0 0 1 21.333333-21.333333h42.666667zM554.666667 789.333333a21.333333 21.333333 0 0 1 21.333333 21.333334v42.666666a21.333333 21.333333 0 0 1-21.333333 21.333334H128a21.333333 21.333333 0 0 1-21.333333-21.333334v-42.666666a21.333333 21.333333 0 0 1 21.333333-21.333334h426.666667z m0-320a21.333333 21.333333 0 0 1 21.333333 21.333334v42.666666a21.333333 21.333333 0 0 1-21.333333 21.333334H128a21.333333 21.333333 0 0 1-21.333333-21.333334v-42.666666a21.333333 21.333333 0 0 1 21.333333-21.333334h426.666667zM896 149.333333a21.333333 21.333333 0 0 1 21.333333 21.333334v42.666666a21.333333 21.333333 0 0 1-21.333333 21.333334H128a21.333333 21.333333 0 0 1-21.333333-21.333334V170.666667a21.333333 21.333333 0 0 1 21.333333-21.333334h768z"
                  fill="#2c2c2c" p-id="16549"></path>
              </svg>
              排序
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="h-[67%] overflow-scroll pb-3 w-full" v-loading="loading">
      <!-- 播放记录 -->
      <div v-if="activeListLength">
        <!-- 歌曲 -->
        <songList :songsList="recentSongs" v-if="activeIndex === 0" />
        <!-- 歌单 -->
        <div class="flex gap-5 flex-wrap" v-else-if="activeIndex === 1">
          <div v-for="item in recentSongList" class="w-[150px] h-fit">
            <div class="w-full h-[150px] relativerounded-md">
              <el-image fit="cover" loading="lazy" :src="item.coverImgUrl" class="w-full h-full rounded-md" />
            </div>
            <div class="py-3 w-full text-ellipsis line-clamp-2 text-sm text-gray-400">{{ item.name }}</div>
          </div>
        </div>
        <!-- 专辑 -->
        <div v-else-if="activeIndex === 2">
          <div v-for="item in recentAlbumList">{{ item }}</div>
        </div>
        <!-- 声音 -->
        <div v-else-if="activeIndex === 3" class="flex flex-wrap gap-5">
          <div v-for="item in recentVoiceList" :key="item.resourceId" class="w-[150px] h-fit">
            <div class=" relative h-[150px] rounded-md">
              <el-image :src="item.coverUrl" loading="lazy" fit="cover" class="w-full h-full rounded-md"></el-image>
              <div
                class="flex justify-between items-center px-2 bg-black/35 rounded-md text-white text-sm absolute bottom-2 right-2 gap-0.5">
                <svg t="1743434739353" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="6139" width="18" height="18">
                  <path
                    d="M471.962453 380.693333C455.535787 380.693333 442.18112 394.026667 442.18112 410.453333v131.989334c0.234667 8.021333 3.690667 15.232 9.002667 20.394666l59.328 67.584a29.674667 29.674667 0 0 0 42.005333 2.688c12.373333-10.88 13.568-29.610667 2.688-41.984l-53.546667-61.013333v-119.68a29.674667 29.674667 0 0 0-29.696-29.76M876.954453 293.845333A472.277333 472.277333 0 0 0 703.770453 131.626667a29.696 29.696 0 0 0-40.341333 11.989333 29.824 29.824 0 0 0 11.925333 40.362667 412.053333 412.053333 0 0 1 151.274667 141.738666c5.696 9.002667 15.296 13.866667 25.194667 13.866667 5.482667 0 10.944-1.493333 15.893333-4.565333a29.845333 29.845333 0 0 0 9.237333-41.173334"
                    fill="#ffffff" p-id="6140"></path>
                  <path
                    d="M501.722453 191.914667v-31.573334a29.781333 29.781333 0 0 0-59.541333 0v33.002667c-21.226667 2.325333-42.538667 6.592-63.68 13.034667C192.495787 262.570667 86.91712 459.584 143.087787 645.568a29.781333 29.781333 0 0 0 57.002666-17.237333c-46.72-154.581333 41.024-318.293333 195.584-364.949334 154.581333-46.634667 318.293333 41.024 364.949334 195.605334 46.72 154.56-41.024 318.293333-195.605334 364.928a292.693333 292.693333 0 0 1-307.562666-90.368 29.824 29.824 0 0 0-42.005334-3.370667 29.824 29.824 0 0 0-3.370666 42.005333 352.938667 352.938667 0 0 0 268.373333 123.818667c33.941333 0 68.288-4.949333 101.824-15.082667 185.984-56.256 291.52-253.269333 235.328-439.189333-43.712-144.896-172.928-240.96-315.882667-249.813333"
                    fill="#ffffff" p-id="6141"></path>
                </svg>
                <span>{{ item.duration }}</span>
              </div>
            </div>
            <div class="py-2 w-full text-ellipsis line-clamp-2 text-sm text-gray-400 overflow-hidden max-h-[51px]">
              {{ item.name }}</div>
          </div>
        </div>
        <!-- 视频 -->
        <div v-else-if="activeIndex === 4" class="flex flex-wrap gap-5">
          <div v-for="item in recentVideoList" :key="item.id" class="w-[200px] h-fit relative">
            <div class="w-full  h-[120px] relative">
              <el-image :src="item.coverUrl" fit="cover" class="w-full h-full rounded-md" loading="lazy" />
              <div
                class="flex justify-between items-center px-2 bg-black/35 rounded-md text-white text-sm absolute bottom-2 right-2 gap-0.5">
                <svg t="1743434739353" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="6139" width="18" height="18">
                  <path
                    d="M471.962453 380.693333C455.535787 380.693333 442.18112 394.026667 442.18112 410.453333v131.989334c0.234667 8.021333 3.690667 15.232 9.002667 20.394666l59.328 67.584a29.674667 29.674667 0 0 0 42.005333 2.688c12.373333-10.88 13.568-29.610667 2.688-41.984l-53.546667-61.013333v-119.68a29.674667 29.674667 0 0 0-29.696-29.76M876.954453 293.845333A472.277333 472.277333 0 0 0 703.770453 131.626667a29.696 29.696 0 0 0-40.341333 11.989333 29.824 29.824 0 0 0 11.925333 40.362667 412.053333 412.053333 0 0 1 151.274667 141.738666c5.696 9.002667 15.296 13.866667 25.194667 13.866667 5.482667 0 10.944-1.493333 15.893333-4.565333a29.845333 29.845333 0 0 0 9.237333-41.173334"
                    fill="#ffffff" p-id="6140"></path>
                  <path
                    d="M501.722453 191.914667v-31.573334a29.781333 29.781333 0 0 0-59.541333 0v33.002667c-21.226667 2.325333-42.538667 6.592-63.68 13.034667C192.495787 262.570667 86.91712 459.584 143.087787 645.568a29.781333 29.781333 0 0 0 57.002666-17.237333c-46.72-154.581333 41.024-318.293333 195.584-364.949334 154.581333-46.634667 318.293333 41.024 364.949334 195.605334 46.72 154.56-41.024 318.293333-195.605334 364.928a292.693333 292.693333 0 0 1-307.562666-90.368 29.824 29.824 0 0 0-42.005334-3.370667 29.824 29.824 0 0 0-3.370666 42.005333 352.938667 352.938667 0 0 0 268.373333 123.818667c33.941333 0 68.288-4.949333 101.824-15.082667 185.984-56.256 291.52-253.269333 235.328-439.189333-43.712-144.896-172.928-240.96-315.882667-249.813333"
                    fill="#ffffff" p-id="6141"></path>
                </svg>
                <span>{{ item.duration }}</span>
              </div>
            </div>
            <div class="py-2 w-full text-ellipsis line-clamp-2 text-sm text-gray-400 overflow-hidden max-h-[51px]">
              {{ item.name }}</div>
          </div>
        </div>
      </div>
      <!-- 空页面 -->
      <div v-else>
        <el-empty description="最近暂无播放"></el-empty>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import SongList from '@renderer/components/songList/songList.vue'
import { onMounted, ref, watch } from 'vue'
import { storeToRefs } from "pinia";
import { useStore } from '@renderer/store'

const activeIndex = ref(0 as number)
const activeListLength = ref(0 as number)
const tabList = ref(['歌曲', '歌单', '专辑', '声音', '视频'])
const loading = ref(true)
const { recentStore } = useStore()
const { recentSongs, recentSongList, recentAlbumList, recentVoiceList, recentVideoList } = storeToRefs(recentStore)
const changIndex = (index: number) => {
  loading.value = true
  activeIndex.value = index
}
onMounted(() => {
  getRecentPlaySongs().then((res) => {
    loading.value = false
    activeListLength.value = res
  })
})

watch(() => activeIndex.value, (newValue) => {
  switch (newValue) {
    case 0:
      getRecentPlaySongs().then((res) => {
        loading.value = false
        activeListLength.value = res
      })
      break
    case 1:
      getRecentPlaySongsList().then((res) => {
        loading.value = false
        activeListLength.value = res
      })
      break
    case 2:
      getRecentPlayAblum().then((res) => {
        loading.value = false
        activeListLength.value = res
      })
      break
    case 3:
      getREcentPlayVoice().then((res) => {
        loading.value = false
        activeListLength.value = res
      })
      break
    default:
      getRecentPlayVideo().then((res) => {
        loading.value = false
        activeListLength.value = res
      })
      break
  }
})
const getRecentPlaySongs = async () => {
  return await recentStore.getRecentSongs()
}
const getRecentPlaySongsList = async () => {
  return await recentStore.getUserRecentPlaySongList()
}
const getRecentPlayAblum = async () => {
  return await recentStore.getUserRecentPlayAlbum()
}
const getREcentPlayVoice = async () => {
  return await recentStore.getUserRecentPlayVoice()
}
const getRecentPlayVideo = async () => {
  return await recentStore.getUserRecentPlayVideo()
}
</script>

<style scoped>
.active::after {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background-color: red;
  margin-top: 10px;
  margin-left: 50%;
  transform: translateX(-50%);
}
</style>
